import React, { Fragment } from 'react';
import classNames from 'classnames';
import { Row, Col, Anchor, Content, Media } from 'react-fule-ui';
import './index.scss';

import { mediaData } from '../../mock/data';

export default function FuleMedia(props) {
  const path = props.match.path;
  const urlPath = `${props.location.pathname}${props.location.search}`;
  console.log(path, urlPath)
  const AnchorData = [
    {
      cid: `${path}?1`,
      title: '基础款',
      card: false, // 是否开启背景
      border: false, // 是否开启边框
      shadow: false, // 是否开启阴影
      motion: false, // 是否开启hover动效
    },
    {
      cid: `${path}?2`,
      title: '带背景',
      card: true, // 是否开启背景
      border: false, // 是否开启边框
      shadow: false, // 是否开启阴影
      motion: false, // 是否开启hover动效
    },
    {
      cid: `${path}?3`,
      title: '带边框',
      card: false, // 是否开启背景，会默认开启背景
      border: true, // 是否开启边框，会默认开启背景
      shadow: false, // 是否开启阴影，会默认开启背景
      motion: false, // 是否开启hover动效，会默认开启背景
    },
    {
      cid: `${path}?4`,
      title: '带阴影',
      card: false,
      border: false, // 是否开启边框，开会默认开启背景
      shadow: true, // 是否开启阴影，会默认开启背景
      motion: false, // 是否开启hover动效，会默认开启背景
    },
    {
      cid: `${path}?5`,
      title: 'hover动效',
      card: false,
      border: false, // 是否开启边框，开会默认开启背景
      shadow: true, // 是否开启阴影，会默认开启背景
      motion: true, // 是否开启hover动效，会默认开启背景
    },
  ];
  // const cidurl= (data) => {
  //   AnchorCid = data;
  //   return AnchorCid;
  // }
  return (
    <Fragment>
      <Content>
        <Content.Header ceiling>卡片</Content.Header>
        <Content.Body>
          <Anchor ceiling>
            {AnchorData.map((item, index) => (
              <Anchor.Item
                path={path}
                urlPath={urlPath}
                cid={`${path}?${index + 1}`}
                index={index + 1}
                key={`anchor-${index}`}
              >
                {item.title}
              </Anchor.Item>
            ))}
          </Anchor>
          {AnchorData.map((item, index) => (
            <Fragment key={`Fragment-${index}`}>
              <h3
                id={`${path}?${index + 1}`}
                className={classNames(
                  'media-h3',
                  item.cid === urlPath || (index === 0 && path === urlPath)
                    ? 'is-actived'
                    : ''
                )}
              >
                {item.title}
              </h3>
              <Row gutter={[20, 20]}>
                {mediaData.map((items, index) => (
                  <Col colSpan={6} key={`col${index}`} phone={24}>
                    <Media
                      data={items}
                      card={item.card}
                      border={item.border}
                      shadow={item.shadow}
                      motion={item.motion}
                    />
                  </Col>
                ))}
              </Row>
            </Fragment>
          ))}
        </Content.Body>
      </Content>
    </Fragment>
  );
}
